/**
 * @typedef {import('three').Scene} Scene
 */

import { AxesHelper, GridHelper, CanvasTexture, Sprite, SpriteMaterial } from 'three';
import { ViewHelper } from 'three/examples/jsm/helpers/ViewHelper.js';
import { CameraHelper } from 'three';

/**
 * @param {Scene} scene
 */
export function enableAxesHelper(scene) {
  const axesHelper = new AxesHelper(100);
  scene.add(axesHelper);

  // 创建文本标签的材质
  const createLabel = (text, color) => {
    const canvas = document.createElement('canvas');
    canvas.width = 64;
    canvas.height = 32;
    const context = canvas.getContext('2d');
    context.fillStyle = 'rgba(0, 0, 0, 0.7)';
    context.fillRect(0, 0, canvas.width, canvas.height);
    context.font = '24px Arial';
    context.textAlign = 'center';
    context.textBaseline = 'middle';
    context.fillStyle = color;
    context.fillText(text, canvas.width / 2, canvas.height / 2);

    const texture = new CanvasTexture(canvas);
    const material = new SpriteMaterial({ map: texture });
    const sprite = new Sprite(material);
    sprite.scale.set(10, 5, 1);
    return sprite;
  };

  // 创建并放置标签
  const xLabel = createLabel('X', '#ff0000');
  xLabel.position.set(110, 0, 0);
  scene.add(xLabel);

  const yLabel = createLabel('Y', '#00ff00');
  yLabel.position.set(0, 110, 0);
  scene.add(yLabel);

  const zLabel = createLabel('Z', '#0000ff');
  zLabel.position.set(0, 0, 110);
  scene.add(zLabel);
}

/**
 * @param {Scene} scene
 */
export function enableGridHelper(scene) {
  const gridHelper = new GridHelper(5000, 100, 0x2c2c2c, 0x888888);
  gridHelper.position.set(0, 0, 0);
  gridHelper.visible = true;
  scene.add(gridHelper);
}

export function enableCameraHelper(scene, camera) {
  const cameraHelper = new CameraHelper(camera);
  scene.add(cameraHelper);
  return cameraHelper;
}

export function enableViewHelper(camera, DOM) {
  const viewHelper = new ViewHelper(camera, DOM);
  viewHelper.visible = true;
  return viewHelper;
}
